<template>
  <div class="service-block width_1200_auto">
    <a-tabs
      class="list-left"
      v-model:activeKey="activeKey"
      @tabClick="handleClick"
    >
      <a-tab-pane :key="tabItem.id" :tab="tabItem.name" v-for="(tabItem,index) in tabCards">
        <ExamList :items="examItems" :loading="loading" @searchExam="onSearch"></ExamList>
        <Pagination :pageNo="pageInfo.pageNo" :pageSize="pageInfo.pageSize" :total="total"
                    @change-page="changePage" style="margin: 10px 0" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { apiGetExamList } from "@/api/exam";
import Pagination from "@/components/Pagination.vue";
import ExamList from "@/components/exam/ExamList.vue";

const activeKey = ref("1");
const tabCards = reactive([
  {
    id: "1",
    name: "全部",
    state: ""
  },
  {
    id: "2",
    name: "进行中",
    state: "0"
  },
  {
    id: "3",
    name: "未开始",
    state: "2"
  },
  {
    id: "4",
    name: "已结束",
    state: "3"
  }
]);

const examItems = ref<any>([]);
const total = ref<number>(0);
const loading = ref<boolean>(false);

const pageInfo = ref<{
  pageNo: number;
  pageSize: number;
  examTitle: string;
  state: string;
}>({
  // 当前页码
  pageNo: 1,
  // 当前每页显示多少条数据
  pageSize: 9,
  examTitle: "",
  state: ""
});

async function getExamList() {
  loading.value = true;
  examItems.value = [];
  const data: any = await apiGetExamList(pageInfo.value);
  examItems.value = data.result?.records;
  total.value = data.result?.total;
  loading.value = false;
}

function changePage(pageNo) {
  pageInfo.value.pageNo = pageNo;
  getExamList();
}

function onSearch(val) {
  pageInfo.value.examTitle = val;
  getExamList();
}

onMounted(() => {
  getExamList();
});

function handleClick(tab) {
  const index: any = tabCards.findIndex((item: any) => item.id == tab);
  pageInfo.value.state = tabCards[index].state;
  getExamList();
}
</script>
<style scoped lang="scss">
@import "@/assets/style/course/global.scss";

.service-block {
  padding: 0 10px;
  margin: 10px auto;
  min-height: 86vh;
  background-color: white;
}

:deep(.ant-card-body) {
  padding: 10px;
}

a {
  color: black;
}

a:hover {
  color: #3370ff;
}

</style>
